<template>
  <!-- 历史数据 -->
  <div>
    <el-row :gutter="10">
      <el-col :span="2">
        <el-input v-model="plate" placeholder="请输入车牌" size="small"></el-input>
      </el-col>
      <el-col :span="2">
        <el-input v-model="autoWeight" placeholder="请输入车重" size="small">
          <template slot="append">kg</template>
        </el-input>
      </el-col>
      <el-col :span="3">
        <el-select v-model="lane" placeholder="请选择车道">
          <el-option key='10086' label='全部' :value='null'></el-option>
          <el-option v-for="item in LaneOptions" :key="item.lanes" :label="item.monitorDirection" :value="item.lanes">
          </el-option>
        </el-select>
      </el-col>
<!--      演示 隐藏-->
<!--      <el-col :span="3">-->
<!--        <el-select v-model="autoType" placeholder="请选择车型">-->
<!--          <el-option key='10086' label='全部' :value='null'></el-option>-->
<!--          <el-option v-for="item in AutoCarOptions" :key="item.id" :label="item.autoTypeName"-->
<!--            :value="item.autoTypeNum">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </el-col>-->
      <el-col :span="10">
        <el-date-picker  v-model="value3" type="datetimerange" range-separator="-" start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
          >
        </el-date-picker> &nbsp;&nbsp;&nbsp;
        <el-switch active-value="1" inactive-value="0" v-model="overrunQuery" inactive-text="超限:"> </el-switch>
      </el-col>


      <el-col :span="2">
        <el-button type="primary" size="small" @click="query">查询</el-button>
      </el-col>
    </el-row>
    <el-table :data="tableData" @row-click="handleRowClick" style="width: 100%;margin-top: 20px;" max-height="308">
      <el-table-column prop="autoTypeName" label="车辆类型" fixed align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="plate" label="车牌" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="lane" label="车道" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="autoWeight" label="总重(kg)" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="axisNum" label="轴数" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="autoSpeed" label="速度(km/h)" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="passingDate" label="过车时间" width="150" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="axisWeight1" label="轴重1(kg)" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="axisWeight2" label="轴重2(kg)" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="axisWeight3" label="轴重3(kg)" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="axisWeight4" label="轴重4(kg)" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="axisWeight5" label="轴重5(kg)" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="axisWeight6" label="轴重6(kg)" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="axisWeight7" label="轴重7(kg)" align="center" show-overflow-tooltip>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import moment from 'moment'
  import  { dateToMs } from '@/config/lastThreeTime'
  export default {
    props: {
      tableData: {
        type: Array
      },
      bridgeId: {
        type: String
      },
      getDatas: {
        type: Function
      },
      histroyQuery: {
        type: Function
      },
    },
    watch: {
      tableData: {
        handler(val, old) {
          // console.log('new')
        },
        immediate: true,
        deep: true
      },
      bridgeId: {
        handler(val, old) {
          if (val)
            this.getOptions(val)
        },
        immediate: true,
        deep: true
      }
    },
    data() {
      return {
        LaneOptions: [],
        AutoCarOptions: [],
        plate: null,
        lane: null,
        autoType:null,
        autoWeight:'',
        value3:[],
        overrunQuery: '0'
      };
    },
    components: {},
    methods: {
      query(){
        let params = {
          // bridgeId:this.bridgeId,
          pageNum:1,
          plate:this.plate,
          lane: this.lane,
          overrunQuery: this.overrunQuery,
          autoType:this.autoType,
          autoWeight: Number(this.autoWeight),
          beginTime:this.value3&&this.value3[0]?(moment(this.value3[0]).format('YYYY-MM-DD HH:mm:ss')) :null,
          endTime:this.value3&&this.value3[1]?(moment(this.value3[1]).format('YYYY-MM-DD HH:mm:ss')) :null
        }
        console.log(params)
        // this.getDatas(params)
        this.histroyQuery(params)
      },
      getOptions(val) {
        //车道
        this.$api.healthMonitor.allLane({
          bridgeId: val
        }).then(res => {
          if (res.data.success) {
            this.LaneOptions = res.data.data
          }
        })
        //车型
        this.$api.healthMonitor.allAutoCar({
          bridgeId: val
        }).then(res => {
          if (res.data.success) {
            this.AutoCarOptions = res.data.data
          }
        })
      },
      handleRowClick(row, event, column) {
        this.$emit("handleIsShowDetail", row);
      }
    }
  };

</script>

<style lang="scss" scoped>
  /deep/.el-table {
    border: 1px solid #ebeef5;
    border-bottom: 0;
  }

  /deep/.el-input__inner {
    height: 32px;
  }

  /deep/.el-input__suffix {
    top: 4px;
  }
/deep/.el-range-separator{
  line-height: 24px;
}
/deep/.el-range__icon {
  line-height: 25px;
}
/deep/.el-date-editor--datetimerange.el-input, .el-date-editor--datetimerange.el-input__inner{
  width : 350px !important;
}
/deep/.el-input-group__append, .el-input-group__prepend{
  padding: 5px !important;
  background-color: transparent !important;
  // border: none !important;
  border-left: none !important;

}
</style>
